Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x | import { RootState } from "../../redux/store"
import { useSelector } from "react-redux"
import { useRouter } from "next/router"
import Head from "next/head"
import React from "react"
import LeftArrowIcon from "../../components/icons/LeftArrowIcon"
const GameDetail = () => {
const router = useRouter()
const onGoBack = () => router.back()
const { name, provider, tags } = useSelector((state: RootState) => state.game)
return (
<div
id="carouselExampleCaptionsFull"
className="fade-in carousel slide carousel-fade relative h-screen"
data-bs-ride="carousel"
>
<Head>
<title>Game Detail</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="Game Detail" />
</Head>
<div className="carousel-inner relative w-full overflow-hidden h-screen">
<div className="carousel-item active relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
<video
data-testid="video"
className="min-w-full min-h-full xl:min-w-0 xl:min-h-0"
playsInline
autoPlay
muted
loop
>
<source className="" src="/vid4.mp4" type="video/mp4" />
</video>
<div
className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style={{ backgroundColor: "rgba(0, 0, 0, 0.6)" }}
>
<div className="flex justify-center items-center h-full">
<div className="text-white text-center px-14 px-md-0 bg-black opacity-60 p-10 rounded-xl border">
<h2 className="text-3xl font-semibold mb-4">
{name || "Game Name"}
</h2>
<div className="text-md mb-6">Provided by: {provider}</div>
<div className="md:space-x-2">
<button
title="Back to games"
onClick={onGoBack}
type="button"
className="inline-flex items-center px-6 py-2 border-2 border-white text-white font-medium text-xs
leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none
focus:ring-0 transition duration-150 ease-in-out hover:shadow-lg hover:shadow-gray-500"
role="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>
<LeftArrowIcon classes="left-btn" />
Back To Games
</button>
</div>
</div>
</div>
</div>
</div>
<div className="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
<video
data-testid="video"
className="min-w-full min-h-full xl:min-w-0 xl:min-h-0"
playsInline
autoPlay
muted
loop
>
<source className="" src="/vid2.mp4" type="video/mp4" />
</video>
<div
className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style={{ backgroundColor: "rgba(0, 0, 0, 0.3)" }}
>
<div className="flex justify-center items-center h-full">
<div className="text-white text-center px-14 px-md-0 w-[600px] bg-black opacity-60 p-10 rounded-xl border">
<h2 className="text-3xl font-semibold mb-4">Tags</h2>
<div className="text-md mb-6">
{tags?.toLocaleString().replace(/,/g, " - ")}
</div>
<div className="md:space-x-2">
<button
onClick={onGoBack}
type="button"
className="inline-flex items-center px-6 py-2 border-2 border-white text-white font-medium text-xs
leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none
focus:ring-0 transition duration-150 ease-in-out hover:shadow-lg hover:shadow-gray-500"
role="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
>
<LeftArrowIcon classes="left-btn" />
Back To Games
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button
className="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide="prev"
>
<span
className="carousel-control-prev-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span className="visually-hidden">Previous</span>
</button>
<button
className="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide="next"
>
<span
className="carousel-control-next-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span className="visually-hidden">Next</span>
</button>
</div>
)
}
export default GameDetail
|